<template>
    <div class="bg-grayBlack md:overflow-x-auto">
        <div class="container m-auto max-w-screen-xl px-2 py-8 md:w-1200 relative">
            <div class="md:flex justify-center px-4 md:px-0">
                <div class="w-40 p-0 mb-4 md:p-4 md:mb-0">
                    <img src="../assets/images/event_logo.webp" alt="COCloud雲端Logo" class="log_img">
                </div>
                <div class="md:border-l md:border-zinc-600 py-1">
                    <div class="md:pb-2 md:flex">
                        <h6 @click="toggleMenu('aboutUs')" class="toggle font-bold py-3 md:py-0 md:px-8" :class="activeItem === 'aboutUs' ? 'text-orange':'text-zinc-200'">
                            關於我們
                            <span class="ml-3 mb-1 border-b-2 border-r-2 rotate-45 inline-block w-2 h-2 md:hidden" v-show="activeItem !== 'aboutUs'"></span>
                        </h6>
                        <div class="flex flex-col mr-12 overflow-hidden transition-all pl-4 pl-4 md:max-h-screen md:pl-0" :class="activeItem === 'aboutUs'?'max-h-screen':'max-h-0'">
                            <a href="https://tw.cocloud.com/zh-tw/cloudplatform/" class="text-zinc-400 mb-1.5 text-xs">COCloud優勢</a>
                            <a href="https://tw.cocloud.com/zh-tw/partner/" class="text-zinc-400 mb-1.5 text-xs">合作夥伴</a>
                        </div>
                    </div>
                    <div class="md:pb-2 md:flex">
                        <h6 @click="toggleMenu('service')" class="toggle font-bold md:px-8 border-t py-3 border-zinc-600 md:py-0 md:border-0" :class="activeItem === 'service'?'text-orange':'text-zinc-200'">
                            產品服務
                            <span class="ml-3 mb-1 border-b-2 border-r-2 rotate-45 inline-block w-2 h-2 md:hidden" v-show="activeItem !== 'service'"></span>
                        </h6>
                        <div class="flex flex-col mr-12 overflow-hidden transition-all pl-4 pl-4 md:pl-0 md:max-h-screen" :class="activeItem === 'service'?'max-h-screen':'max-h-0'">
                            <a href="https://tw.cocloud.com/zh-tw/cloudIntegration/" class="text-zinc-400 mb-1.5 text-xs">雲盒子<small
                                    class="ml-1 p-0.5 bg-orange rounded text-white text-xs">獨家</small></a>
                            <a href="https://tw.cocloud.com/zh-tw/prepaidcard/" class="text-zinc-400 mb-1.5 text-xs">暢雲通<small
                                    class="ml-1 p-0.5 bg-orange rounded text-white text-xs">獨家</small></a>
                            <a href="https://tw.cocloud.com/zh-tw/server/" class="text-zinc-400 mb-1.5 text-xs">雲伺服器</a>
                            <a href="https://tw.cocloud.com/zh-tw/cdn/" class="text-zinc-400 mb-1.5 text-xs">CDN加速</a>
                            <a href="https://tw.cocloud.com/zh-tw/database/" class="text-zinc-400 mb-1.5 text-xs">雲端資料庫</a>
                            <a href="https://tw.cocloud.com/zh-tw/ddos/" class="text-zinc-400 mb-1.5 text-xs">DDoS防禦</a>
                            <a href="https://tw.cocloud.com/zh-tw/sms/" class="text-zinc-400 mb-1.5 text-xs">全球簡訊</a>
                        </div>
                    </div>
                </div>
                <div class="md:border-l md:border-zinc-600 md:py-1">
                    <div class="md:pb-2 md:flex">
                        <h6 @click="toggleMenu('solution')" class="toggle font-bold md:px-8 border-t py-3 border-zinc-600 md:py-0 md:border-0" :class="activeItem === 'solution'?'text-orange':'text-zinc-200'">
                            解決方案
                            <span class="ml-3 mb-1 border-b-2 border-r-2 rotate-45 inline-block w-2 h-2 md:hidden" v-show="activeItem !== 'solution'"></span>
                        </h6>
                        <div class="flex flex-col mr-12 overflow-hidden transition-all pl-4 pl-4 md:pl-0 md:max-h-screen" :class="activeItem === 'solution'?'max-h-screen':'max-h-0'">
                            <a href="https://tw.cocloud.com/zh-tw/alicloud.migration/" class="text-zinc-400 mb-1.5 text-xs">阿里雲搬運</a>
                            <a href="https://tw.cocloud.com/zh-tw/aws.global.accelerator/" class="text-zinc-400 mb-1.5 text-xs">AWS全球加速</a>
                            <a href="https://tw.cocloud.com/zh-tw/cloudflare/" class="text-zinc-400 mb-1.5 text-xs">Cloudflare解決方案</a>
                            <a href="https://tw.cocloud.com/zh-tw/tencentcloud.live/" class="text-zinc-400 mb-1.5 text-xs">騰訊雲直播</a>
                        </div>
                    </div>
                    <div class="md:pb-2 md:flex">
                        <h6 @click="toggleMenu('news')" class="toggle font-bold md:px-8 border-t py-3 border-zinc-600 md:py-0 md:border-0" :class="activeItem === 'news'?'text-orange':'text-zinc-200'">
                            最新消息
                            <span class="ml-3 mb-1 border-b-2 border-r-2 rotate-45 inline-block w-2 h-2 md:hidden" v-show="activeItem !== 'news'"></span>
                        </h6>
                        <div class="flex flex-col mr-12 overflow-hidden transition-all pl-4 pl-4 md:pl-0 md:max-h-screen" :class="activeItem === 'news'?'max-h-screen':'max-h-0'">
                            <a href="https://tw.cocloud.com/zh-tw/cloud-news/" class="text-zinc-400 mb-1.5 text-xs">聚選消息</a>
                            <a href="https://tw.cocloud.com/zh-tw/blog/" class="text-zinc-400 mb-1.5 text-xs">雲端新聞</a>
                        </div>
                    </div>
                    <div class="md:pb-2 md:flex">
                        <a href="https://tw.cocloud.com/zh-tw/contact_us/" class="text-zinc-200 font-bold md:px-8 border-t py-3 border-zinc-600 md:py-0 md:border-0 block md:inline-block">聯絡我們</a>
                    </div>
                    <div class="md:pb-2 md:flex">
                        <a href="https://tw.cocloud.com/zh-tw/FAQ/" class="text-zinc-200 font-bold md:px-8 border-t py-3 border-zinc-600 md:py-0 md:border-0 block md:inline-block">常見問題</a>
                    </div>
                </div>
                <div class="md:border-l md:border-zinc-600 md:py-1 md:px-8">
                    <div class="md:flex mb-2">
                        <h6 class="text-zinc-200 font-bold md:px-2 border-t py-3 border-zinc-600 md:py-0 md:border-0 block md:inline-block">聯繫客服</h6>
                        <a href="https://tw.cocloud.com/intro" class="text-zinc-200 font-bold md:px-2 border-t py-3 border-zinc-600 md:py-0 md:border-0 block md:inline-block">人才招募</a>
                        <a download href="https://tw.cocloud.com/pdf/intro_zh_TW.pdf" class="text-zinc-200 font-bold md:px-2 flex border-t py-3 border-zinc-600 md:py-0 md:border-0">
                            COCloud簡介
                            <img src="" alt=""/>
                        </a>
                    </div>
                    <div class="flex flex-col mb-4">
                        <div>
                            <a href="mailto:service@cocloud.com?subject=邮件主题" class="text-zinc-400 mb-1.5 text-xs md:px-2">客服信箱 : service@cocloud.com</a>
                        </div>
                        <div>
                            <a href="tel:+886 02-8751-0889" class="text-zinc-400 mb-1.5 text-xs md:px-2">客服電話 : +886 02-8751-0889</a>
                        </div>
                    </div>
                    <div class="qrcode flex">
                        <div class="text-center w-1/4">
                            <img src="https://tw.cocloud.com/_nuxt/img/lineq.a675a94.svg" class="mx-auto">
                            <small class="text-white scale-75 inline-block">@COCloud</small>
                        </div>
                        <div class="text-center w-1/4">
                            <img src="https://tw.cocloud.com/_nuxt/img/wechat.1f8729f.svg" class="mx-auto">
                            <small class="text-white scale-75 inline-block">cocloudsales</small>
                        </div>
                        <div class="text-center w-1/4">
                            <img src="https://tw.cocloud.com/_nuxt/img/line.a82bddd.svg" class="mx-auto">
                            <small class="text-white scale-75 inline-block">+886906983760 </small>
                        </div>
                        <div class="text-center w-1/4">
                            <img src="https://tw.cocloud.com/_nuxt/img/tg.738748c.svg" class="mx-auto">
                            <small class="text-white scale-75 inline-block">@Cocloudsales </small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sms mt-4 absolute right-0 top-4 md:relative">
                <div class="flex justify-center">
                    <a class="inline-block mx-2" target="_blank" href="https://www.facebook.com/COCloud-102471542308156">
                        <img class="w-6 h-6 object-contain" src="">
                    </a>
                    <a class="inline-block mx-2" target="_blank" data-isreplace-boolean="true" href="https://www.linkedin.com/company/cocloud2021">
                        <img class="w-6 h-6 object-contain" src="">
                    </a>
                    <a class="inline-block mx-2" target="_blank" data-isreplace-boolean="true" href="https://www.youtube.com/channel/UC22HwPKKV2VKfFbFyXoIGCw" style="line-height: 0.1; margin-bottom: -0.5rem;">
                        <img class="w-12 h-7 object-contain" src="">
                    </a>
                </div>
            </div>
        </div>
        <div class="copyright text-zinc-400 scale-75 text-center md:flex md:flex-wrap md:justify-center pb-6">
            <span class="block md:inline-block">聚選匯雲 © 2022 COCloud Co.,Ltd. All Rights Reserved. </span>
            <a href="/zh-tw/privacy/" class="mx-2">隱私權政策</a> 
            <a href="/zh-tw/disclaimer/" class="mx-2">免責聲明</a>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'

const activeItem = ref('')

window.addEventListener('resize',()=>{
    if(window.innerWidth >= 768) {
        activeItem.value = ''
    }
})

const toggleMenu = (item) => {
    activeItem.value = item
}

</script>


